<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="../css/common.css">
    <script src="../js/flexible.js"></script>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2986739_pe1a3y2l85c.css">
    <link rel="stylesheet" href="../css/login.css">
<<<<<<< HEAD
    <link rel="icon" href="../images/favicon.ico" type="images/x-icon">

=======
>>>>>>> c2a0b16d374b2dadbf60483b2ca7e378d937a164
</head>

<body>
    <div class="allhead">
        <div class="head">
            <div class="head1">
                <span>你好，欢迎来到海澜之家！</span>
                <div class="head1son">
                    <a href=""><b>请登录</b></a>
                    <a href=""><b>合作账号登录</b>
                        <i class="iconfont icon-weibo"></i>
                        <i class="iconfont icon-social-qq"></i>
                    </a>
                    <a href="../html/zhuce.html"><b>免费注册</b></a>
                </div>
                <div class="show">
                    <span class="show-phone">欢迎:</span>
                    <a href="" class="over">退出</a>
                </div>
            </div>
            <div class="head2">
                <div class="head2son">
                    <a href="" class="">我的海澜之家</a>
                    <a href="" class="">在线客服</a>
                    <a href="../html/cart.html" class="">我的购物袋</a>
                    <a href="" class="">帮助</a>
                </div>
            </div>
        </div>
    </div>
    <div class="wrap">
        <div class="nav">
            <div class="wrapson">
                <a href=""><span>附近门店</span></a>
            </div>
            <div class="wrap1son">
                <a href=""><img src="../images/1.png" alt=""></a>
            </div>
            <div class="wrap2son">
                <input type="text" class="sousuo">
                <a href=""><i class="iconfont icon-sousuo"></i></a>
            </div>
        </div>
    </div>
    <div class="banner">
        <ul>
            <a href="">
                <li>首页</li>
            </a>
            <a href="">
                <li>2021夏季热卖</li>
            </a>
            <a href="">
                <li>明星同款</li>
            </a>
            <a href="">
                <li>IP联名</li>
            </a>
            <a href="">
                <li>国民臻品</li>
            </a>
            <a href="">
                <li>2021秋季新品</li>
            </a>
        </ul>
    </div>
    <div class="reg">
        <p>请登录</p>
    </div>
    <div class="subject">
        <div class="subson">
            <div class="subson1">
                <p>请输入您的账号和密码</p>
                <p>
                    <label for="">手机号:</label>&emsp;
                    <input type="text" id="phone" placeholder="">
                    <span id="phoneSpan"></span>
                </p>
                <p>
                    <label for="">密&emsp;码:</label>&emsp;
                    <input type="text" id="password" placeholder="">
                    <span id="pwdSpan"></span>
                </p>
                <p>
                    <label for="">验证码:</label>&emsp;
                    <input type="text" id="code" placeholder="">
                    <span id="createCode">1234</span>&emsp;
                    <span id="codeSpan">看不清？换一张</span>
                </p>
                <div class="subson1one">
                    <a href=""><span>忘记自己的账号或密码？</span></a>
                    <span class="logBtn">登录</span>
                </div>
                <div class="subson1two">
                    <span>使用其他合作网站登录</span>
                    <div class="box">
                        <img src="../images/7.png" alt=""><span>新浪微博</span>
                        <img src="../images/8.png" alt=""><span>腾讯QQ</span>
                        <img src="../images/9.png" alt=""><span>支付宝</span>
                    </div>
                </div>
            </div>
            <div class="subson2">
                <h3>注册成为新用户</h3>
                <p>现在免费注册成为海澜之家用户，便能立刻享受便宜又放心的购物乐趣。</p>
                <span>简单快捷1分钟完成注册</span><br>
                <span>注册用户可方便的收藏商品</span><br>
                <span>注册用户可方便的管理查询自己的订单</span><br>
                <a href="../html/zhuce.html">
                    <p class="one">免费注册</p>
                </a>
            </div>
        </div>
        <div class="subson3">
            <a href="../html/shouye.html">
                <p>取消</p>
            </a>
        </div>
    </div>
    <div class="foot"></div>
</body>
<script src="../js/tools.js"></script>
<script src="../js/jquery.js"></script>
<script src="../js/api.js"></script>
<script>
    $('.logBtn').click(async function () {
        const phone = $('#phone').val();
        const password = $('#password').val();
        console.log(phone);
        const res = await login({
            phone,
            password
        })
        const { status, msg } = res;
        if (status) {
            alert('登录成功')
            localStorage.setItem('phone', phone);
            let url = location.search.split('?historyURL=')[1];
            if(url) {
                url = decodeURIComponent(url)
                location.href = url;
            }
            $('.head1son').css({'display' : 'none'})
            location.href = "../html/shouye.html";
        } else {
            alert(msg);
        }

    })


    var isPwdOk = false;
    var isPhoneOk = false;
    var isCodeOk = false;

    $('#createCode').html(randCode());
    $('#createCode').click(function () {
        $('#createCode').html(randCode());
    })


    $('#password').blur(function () {
        const password = $('#password').val();
        if (password === '') {
            console.log(11);
            $('#pwdSpan').html("密码不为空");
            $('#pwdSpan').css({ 'font-size': '12px', 'color': 'red' })
            isPwdOk = false;
            $('.logBtn').prop('disabled', true)

        } else {
            $('#pwdSpan').html("√");
            $('#pwdSpan').css({ 'font-size': '12px', 'color': 'green' })
            isPwdOk = true;
            $('.logBtn').prop('disabled', false)
        }
        asd()
    })

    $('#phone').blur(function () {
        const phone = $('#phone').val();
        if (phone === '') {
            $('#phoneSpan').html("手机号不能为空");
            $('#phoneSpan').css({ 'font-size': '12px', 'color': 'red' })
            isPhoneOk = false;
            $('.logBtn').prop('disabled', true)
        } else {
            $('#phoneSpan').html("√");
            $('#phoneSpan').css({ 'font-size': '12px', 'color': 'green' })
            isPhoneOk = true;
            $('.logBtn').prop('disabled', false)
        }
        asd()
    })

    $('#code').blur(function () {
        // console.log($('#code').val().toLowerCase());

        if ($('#code').val().toLowerCase() === $('#createCode').html().toLowerCase()) {
            $('#codeSpan').html("√");
            $('#codeSpan').css({ 'font-size': '12px', 'color': 'green' })
            isCodeOk = true;

        } else {
            $('#codeSpan')[0].innerHTML = "验证码错误";
            $('#codeSpan')[0].style.fontSize = "12px";
            $('#codeSpan')[0].style.color = "red";
            isCodeOk = false;
        }
        asd()

    })

    $('#createCode').onclick = function () {
        randCode();
    }

    function asd() {
        if (isPhoneOk && isPwdOk && isCodeOk) {
            $('.logBtn').prop('disabled', false)
            $('.logBtn').css({ 'color': 'white' })
        }
    }





    // console.log(allArr);

    function randCode(n) {
        n = n || 4;
        var smallArr = [];
        for (var i = 97; i <= 122; i++) {
            var str = String.fromCharCode(i);
            smallArr.push(str)
        }
        var numArr = [];
        for (var i = 0; i < 10; i++) {
            numArr.push(i + '')
        }
        console.log(numArr.length);

        var bigArr = [];
        for (var i = 65; i <= 90; i++) {
            var str = String.fromCharCode(i);
            bigArr.push(str)
        }

        var allArr = smallArr.concat(numArr, bigArr)
        const arr = allArr;
        console.log(arr);
        var res = '';
        for (let i = 0; i < n; i++) {
            let ran = rand(0, arr.length - 1);
            // console.log(ran);
            res += arr[ran]
        }
        return res;
    }


    randCode();

    function rand(min, max) {
        return parseInt(Math.random() * (max - min)) + min;
    }
</script>

</html>